<div class="matContainer" [class.alt]="os.darkHeader">
  <div
    *ngFor="
      let item of ms.game.resourceManager.unlockedMaterials;
      trackBy: getId
    "
    class="main-container"
  >
    <i
      nz-icon
      [nzType]="item.icon"
      [ngClass]="item.colorClass"
      [attr.aria-label]="item.name"
    ></i>
    <div
      class="container"
      nz-popover
      [nzPopoverTitle]="titleTemplate"
      [nzPopoverContent]="prodInfoTemplate"
      [nzPopoverTrigger]="popoverTrigger"
      [ngClass]="item.colorClass"
      [nzPopoverPlacement]="item.id === 'M' ? 'bottomLeft' : 'bottom'"
    >
      <!-- (click)="createModal(item.name, contentTemplate, tplFooter)" -->
      <!-- nzPopoverPlacement="bottom" -->
      <span class="monospace">
        <span
          class="min-width"
          *ngIf="item.quantity.gt(0.001) || item.id === 'x' || item.id === 'b'"
          >{{ item.quantityUi | format: false:2 }}</span
        >
        <span class="min-width" *ngIf="item.showUiLimit"
          >/{{ item.uiLimit | format: false:2 }}</span
        >
      </span>
      <span class="min-width per-sec">
        <span [class]="item.perSec.gte(0) ? '' : 'text-danger'"
          >{{ item.perSecUi | format: false:2 }}/s</span
        >
      </span>
    </div>

    <ng-template #titleTemplate>
      <span [ngClass]="item.colorClass">
        <i nz-icon [nzType]="item.icon"></i>
        <strong> {{ item.name }} </strong></span
      >
    </ng-template>
    <ng-template #prodInfoTemplate>
      <app-prod-info [unit]="item"></app-prod-info>
    </ng-template>
  </div>

  <!-- Naval Capacity -->
  <div class="main-container">
    <i nz-icon nzType="my:strafe" aria-label="Naval Capacity"></i>
    <div class="container">
      <span class="monospace min-width">
        {{ ms.game.navalCapacity | format: true }}
      </span>
    </div>
  </div>

  <!-- Districts -->
  <div
    class="main-container habSpace-color"
    nz-popover
    [nzPopoverTitle]="habTitleTemplate"
    [nzPopoverContent]="habInfoTemplate"
    [nzPopoverTrigger]="popoverTrigger"
  >
    <i nz-icon nzType="fa-s:globe" aria-label="Habitable space"></i>
    <div class="container">
      <span class="monospace min-width">
        {{ ms.game.resourceManager.habitableSpace.quantityUi | format: true }}
      </span>
    </div>
  </div>
  <div
    class="main-container metal-color"
    nz-popover
    [nzPopoverTitle]="miningTitleTemplate"
    [nzPopoverContent]="miningInfoTemplate"
    [nzPopoverTrigger]="popoverTrigger"
  >
    <i nz-icon nzType="my:mining" aria-label="Mining districts"></i>
    <div class="container">
      <span class="monospace min-width">
        {{ ms.game.resourceManager.miningDistrict.quantityUi | format: true }}
      </span>
    </div>
  </div>
  <div
    class="main-container energy-color"
    nz-popover
    [nzPopoverTitle]="energyTitleTemplate"
    [nzPopoverContent]="energyInfoTemplate"
    [nzPopoverTrigger]="popoverTrigger"
  >
    <i nz-icon nzType="my:solar-power" aria-label="Energetic districts"></i>
    <div class="container">
      <span class="monospace min-width">
        {{ ms.game.resourceManager.energyDistrict.quantityUi | format: true }}
      </span>
    </div>
  </div>

  <div
    class="main-container"
    *ngIf="ms.game.challengeManager.expandingChallenge.isActive"
  >
    <span
      nz-popover
      nzPopoverTitle="Expanding Universe"
      nzPopoverContent="Multiplier for searching and distance"
    >
      <i
        nz-icon
        nzType="arrows-alt"
        nzTheme="outline"
        aria-label="Expanding Universe Factor"
      ></i>
      <span class="monospace"
        >x{{ ms.game.challengeManager.expandingFactor | format }}</span
      >
    </span>
  </div>

  <div class="main-container" *ngIf="!os.listUi">
    <app-buy-menu></app-buy-menu>
  </div>
</div>

<ng-template #tplFooter>
  <button nz-button nzType="primary" (click)="destroyTplModal()">
    <span>Ok</span>
  </button>
</ng-template>

<ng-template #habTitleTemplate>
  <span class="habSpace-color">
    <i nz-icon nzType="fa-s:globe"></i>
    <strong> Habitable Space </strong></span
  >
</ng-template>
<ng-template #habInfoTemplate>
  <app-district-info
    [district]="ms.game.resourceManager.habitableSpace"
  ></app-district-info>
</ng-template>

<ng-template #miningTitleTemplate>
  <span class="metal-color">
    <i nz-icon nzType="my:mining"></i>
    <strong> Mining District </strong></span
  >
</ng-template>
<ng-template #miningInfoTemplate>
  <app-district-info
    [district]="ms.game.resourceManager.miningDistrict"
  ></app-district-info>
</ng-template>

<ng-template #energyTitleTemplate>
  <span class="energy-color">
    <i nz-icon nzType="my:solar-power"></i>
    <strong> Energy District </strong></span
  >
</ng-template>
<ng-template #energyInfoTemplate>
  <app-district-info
    [district]="ms.game.resourceManager.energyDistrict"
  ></app-district-info>
</ng-template>
